Technology Built for 
Computer-based Math

Jon McLoone

About CBM

Manipulate[With[{
scale=0.5,
size=63,
clrset=3,
clrs1={
{{,},{,},{,},{,}},
{{,},{,},{,},{,}}},
clrs={
{{,},{,},{,},{,}},
{{,},{,},{,},{,}},
{{,},{,},{,},{,}}
}
},
define=[[1]];
translate=[[1]];
compute=[[1]];
interpret=[[1]];
handcalc=[[1]];
translateFull=[[1]];
interpretFull=[[1]];

If[v==0,

Column[{
Mouseover[Graphics[{
clrs1[[2,1,1]],
Polygon[Chevron[{18,1},{550,0},40,10]],
clrs1[[2,1,2]],
{Opacity[.5],Text[Style["1.",40],{53,21}]},
Translate[Scale[define,scale],{-10,-5}]
},ImageSize->{Automatic,size},ImagePadding->0,PlotRangePadding->0],
Graphics[{
clrs1[[1,1,1]],
Polygon[Chevron[{18,1},{550,0},40,10]],
clrs1[[1,1,2]],
{Opacity[.65],Text[Style["1.",40],{53,21}]},
Translate[Scale[define,scale],{-10,-5}]
},ImageSize->{Automatic,size},ImagePadding->0,PlotRangePadding->0]],

Spacer[{20,20}],


Mouseover[
Graphics[{
clrs1[[2,2,1]],
Polygon[Chevron[{-6,1},{550,0},40,10]],
clrs1[[2,2,2]],
{Opacity[.5],Text[Style["2.",40],{29,21}]},
Translate[Scale[translateFull,scale],(*XXX*){-132,-5}]
},ImageSize->{Automatic,size},ImagePadding->0,PlotRangePadding->0],
Graphics[{
clrs[[1,2,1]],
Polygon[Chevron[{-6,1},{550,0},40,10]],
clrs1[[1,2,2]],
{Opacity[.65],Text[Style["2.",40],{29,21}]},
Translate[Scale[translateFull,scale],{-132,-5}]
},ImageSize->{Automatic,size},ImagePadding->0,PlotRangePadding->0]],
Spacer[{20,20}],

Mouseover[
Graphics[{
clrs[[2,3,1]],
Polygon[Chevron[{5,1},{550,0},40,10]],
clrs1[[2,3,2]],
{Opacity[.5],Text[Style["3.",40],{40,21}]},
Translate[Scale[compute,scale],{-30,-5}]
},ImageSize->{Automatic,size},ImagePadding->0,PlotRangePadding->0],
Graphics[{
clrs1[[1,3,1]],
Polygon[Chevron[{5,1},{550,0},40,10]],
clrs1[[1,3,2]],
{Opacity[.65],Text[Style["3.",40],{40,21}]},
Translate[Scale[compute,scale],{-30,-5}]
},ImageSize->{Automatic,size},ImagePadding->0,PlotRangePadding->0]],
Spacer[{20,20}],

Mouseover[Graphics[{
clrs1[[2,4,1]],
Polygon[Chevron[{-3,1},{550,0},40,10]],
clrs1[[2,4,2]],
{Opacity[.5],Text[Style["4.",40],{32,21}]},
Translate[Scale[interpretFull,scale],(*XXX*){-120,-5}]
},ImageSize->{Automatic,size},ImagePadding->0,PlotRangePadding->0],
Graphics[{
clrs1[[1,4,1]],
Polygon[Chevron[{-3,1},{550,0},40,10]],
clrs1[[1,4,2]],
{Opacity[.65],Text[Style["4.",40],{32,21}]},
Translate[Scale[interpretFull,scale],{-120,-5}]
},ImageSize->{Automatic,size},ImagePadding->0,PlotRangePadding->0]]

}],


(*xxxx slider xxx*)
Column[{
Graphics[{
clrs[[clrset,1,1]],
Polygon[Chevron[{18,1},{340-170v,0},40,10]],
clrs[[clrset,1,2]],
{Opacity[.75],Text[Style["1.",40],{53,21}]},
Translate[Scale[define,{scale-.3v,scale}],{-10-60v,-5}]
},ImageSize->{Automatic,size},ImagePadding->0,PlotRangePadding->0],Spacer[{20,20}],

Graphics[{
clrs[[clrset,2,1]],
Polygon[Chevron[{18,1},{340-160v,0},40,10]],
clrs[[clrset,2,2]],
{Opacity[.75],Text[Style["2.",40],{53,21}]},
Translate[Scale[translate,{scale-.3v,scale}],{-25-67v,-5}]
},ImageSize->{Automatic,size},ImagePadding->0,PlotRangePadding->0],Spacer[{20,20}],

Graphics[{
Blend[{,Gray},v],
Polygon[Chevron[{-6,1},{340+160v,0},40,10]],
White,{Opacity[.75-.75Min[2v,1]],Text[Style["3.",40],{29,21}]},
{Opacity[1-Max[(2v),0]],Translate[Scale[compute,{scale,scale}],{-42,-5}]},
{Opacity[2Max[v,.5]-1],Translate[Scale[handcalc,.85],{160,-12}]}
},ImageSize->{Automatic,size},ImagePadding->0,PlotRangePadding->0],Spacer[{20,20}],

Graphics[{
clrs[[clrset,4,1]],
Polygon[Chevron[{18,1},{340-160v,0},40,10]],
clrs[[clrset,4,2]],{Opacity[.75],Text[Style["4.",40],{53,21}]},
Translate[Scale[interpret,{scale-.3v,scale}],{-15-65v,-5}]
},ImageSize->{Automatic,size},ImagePadding->0,PlotRangePadding->0]
}]]],{{v,0,""},0,1,ImageSize->820, ControlPlacement->Bottom}, Paneled->False,AppearanceElements->None,

Initialization:>(
Chevron[start_,size_,ywidth_,arrow_]:=
{start, 
start+size,
start+size+{0,ywidth/2}+{arrow,0},
start+size+{0,ywidth}, 
start+{0,ywidth},
start+{0,ywidth/2}+{arrow,0}};
)
]

About CBM

Chevron[start_,size_,ywidth_,arrow_]:=
{start, 
start+size,
start+size+{0,ywidth/2}+{arrow,0},
start+size+{0,ywidth}, 
start+{0,ywidth},
start+{0,ywidth/2}+{arrow,0}};
define=[[1]];
translateFull=[[1]];
compute=[[1]];
interpretFull=[[1]];
handcalc=[[1]];
colorBars[clrs_]:=Manipulate[With[{
size=63,
clrset=2,
length=550,
scale=0.5
},
Column[{
Graphics[{
clrs[[1,1]],
Polygon[Chevron[{18,1},{length,0},40,10]],
clrs[[1,2]],
{Opacity[.65],Text[Style["1.",40],{53,21}]},
Translate[Scale[define,scale],{-10,-5}]
},ImageSize->{Automatic,size},ImagePadding->0,PlotRangePadding->0],
Spacer[{20,20}],

Graphics[{
clrs[[2,1]],
Polygon[Chevron[{-6,1},{length,0},40,10]],
clrs[[2,2]],
{Opacity[.65],Text[Style["2.",40],{29,21}]},
Translate[Scale[translateFull,scale],{-132,-5}]
},ImageSize->{Automatic,size},ImagePadding->0,PlotRangePadding->0],
Spacer[{20,20}],

Graphics[{
clrs[[3,1]],
Polygon[Chevron[{-6,1},{length,0},40,10]],
clrs[[3,2]],
{Opacity[.65],Text[Style["3.",40],{29,21}]},
Translate[Scale[compute,scale],{-42,-5}]
},ImageSize->{Automatic,size},ImagePadding->0,PlotRangePadding->0],
Spacer[{20,20}],

Graphics[{
clrs[[4,1]],
Polygon[Chevron[{-3,1},{length,0},40,10]],
clrs[[4,2]],
{Opacity[.65],Text[Style["4.",40],{32,21}]},
Translate[Scale[interpretFull,scale],{-120,-5}]
},ImageSize->{Automatic,size},ImagePadding->0,PlotRangePadding->0],

}]],{dummy,ControlType->None}, ControlPlacement->Bottom, Paneled->False,AppearanceElements->None]

colorBars[
clrs={{,},{,},{,},{,}}]

About CBM

colorBars[{{,},{,},{,},{,}}]

About CBM

http://computerbasedmath.org/

Platform choice

CDF Content

Mathematica AND Player support

All code in Wolfram language

No dependances
Easier upgrades
No special skills

Technology for some key tasks

Create a content container

Lots of custom learning apps

Streamline authoring process

Fast question and feedback creation

Support teacher led learning

Support collaboration

Create a content container

Content navigation

Preference setting

Account management

Lots of custom learning apps

Manipulate!

Example: How Many Words, Test Yourself 			2.07/1/5

Streamline authoring process

Structured content templates

Automatic code translation

Programmatic build of teacher and student versions

Fast question and feedback creation

<<CBM`

Question["What is a multiple choice question?",{"A constriained question type"->True, "An elephant"->False,"Something else"->False}]

Question["What city are we in",{"Champaign"->True},QuestionType->"String"]

Question[
Column[{"Where is the maximum?",Plot[1-x^2,{x,-1,1},AxesOrigin->{-1,0}]}],
{Point[{0,1}]->True},
Tolerance->0.1]

Question[
Graphics[{},PlotRange->{{0,6},{0,36}},AspectRatio->1/GoldenRatio,Axes->True,PlotLabel->"Draw y=x^2"],{Line[Table[{x,x^2},{x,0,6}]]->True},
Tolerance->5,QuestionType->"FreeformLine"]

Options[Question]

Support teacher led learning

Two screen management

Compact representation of teacher notes

Support collaboration

<<CBM`

CallCBMServer["Append","test","Answer",(Sqrt[2])]

CallCBMServer["Append","test","Answer",Plot[x,{x,0,10}]]

CallCBMServer["Get","test","Answer",""]

CallCBMServer["RecordGet","test","Answer",""]//Grid

CallCBMServer["Reset","test","",""]

Pilot results

Collaboration scaled well - 350,000+ questions answered

UI not so well! Lesson: keep it simple, keep it clean

Question: Is any of this useful to you?